<template>
  <el-card class="box-card">
      <div slot="header" style="text-align:left">
           <h3> 企业：{{appName}}</h3>
      </div>
      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" border stripe>
        <el-table-column prop="appName" label="应用名称"  sortable width="180"></el-table-column>
        <el-table-column  prop="menus" label="资源"> 
          <template slot-scope="scope">
                       <el-table :data="scope.row.menus" @select="handleSelection"  :ref="'menuTable'+scope.row.appId" style="width: 100%;margin-bottom: 20px;" row-key="id" border  
                          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                            <el-table-column type="selection" width="55" ></el-table-column>
                            <el-table-column prop="name" label="菜单名称" >
                            </el-table-column>
                            <el-table-column prop="type" label="类型"  >
                                  <template slot-scope="scope">  
                                       <span v-if="scope.row.type=='FUNC'"><i class="el-icon-s-order"></i>功能</span>
                                        <span v-else><i class="el-icon-s-management"></i>菜单</span>
                                   </template>
                            </el-table-column>
                       </el-table>
            </template>
        </el-table-column>
      </el-table>
         <div style="margin-top: 20px">
          <el-button @click="sub()">确定</el-button>
        </div>
  </el-card>
</template>
<script>
import {companyAppmenu,companySetAppmenu} from "@/request/api.js";
  export default {
    data() {
      return {
        appName:"",
        tableData: [],
        editMenuVisible:false,
        menuform:{sortNum:1},
        treeData:[],
        rules: {
          name: [
            { required: true, message: '请填写资源名称', trigger: 'blur' },
             { min: 2, max: 20, message: '长度在 2 到 20个字符', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择资源类型', trigger: 'change' }
          ],
          router: [
            {  required: true, message: '请填资源路由地址', trigger: 'change' }
          ],
          url: [
            {  required: true, message: '请填资源接口地址', trigger: 'change' }
          ],
          sortNum: [
            {  required: true, message: '请填资源排序', trigger: 'change' }
          ]
        }
      }
    },

    methods:{
        //加载资源树
        loadTree(){
          if (this.$route.query.id) {
              companyAppmenu(this.$route.query.id).then(res => {
                this.tableData=res;
                this.$nextTick(function () {
                  if(this.tableData && this.tableData.length>0){
                     for(var i=0;i<this.tableData.length;i++){
                        this.check(this.tableData[i].menus);
                     }
                  }
              })
              });
           
          }
        },
        //提交
        sub(){
            if(this.tableData && this.tableData.length>0){
              let param ={"companyId":this.$route.query.id,"menus":new Array()};
              for(var i=0;i<this.tableData.length;i++){
                let appChoosed =  this.$refs['menuTable'+this.tableData[i].appId].selection;
                param.menus.push.apply(param.menus,appChoosed);
              }
              for(var i=0;i<param.menus.length;i++){
                param.menus[i].resourceId=param.menus[i].id;
              }
              companySetAppmenu(param).then(res => {
                this.$util.success();
              });
            }
        },
      
        //递归默认选中
        check(menus){
          if(menus && menus.length>0){
            for(var i=0;i<menus.length;i++){
                this.$refs['menuTable'+menus[i].appId].toggleRowSelection(menus[i],menus[i].checked);
                this.check(menus[i].children);
            }
          }
        },
        //选中事件
        handleSelection(val,row){
           row.checked=!row.checked;
           this.selectTree(row,row.checked);
          //  if(row.checked){
          //     this.selectParentTree(row,row.checked);
          //  }
           
        },
        //选中子节点递归
        selectTree(row,flag){
            if(row.children && row.children.length>0){
               for(var i=0;i<row.children.length;i++){
                  this.$refs['menuTable'+row.appId].toggleRowSelection(row.children[i],flag);
                  this.selectTree(row.children[i],flag);
               }
            }
        },
        //选中父节点递归
        selectParentTree(row,flag){
            if(row.parentId){
                if(this.tableData && this.tableData.length>0){
                     let arrs = new Array();
                    for(var i=0;i<this.tableData.length;i++){
                      arrs.push.apply(arrs,this.tableData[i].menus);
                    }
                     let parentArrs = new Array();
                     this.findParent(arrs,row.parentId,parentArrs);
                     for(var i=0;parentArrs.length>0 && parentArrs[parentArrs.length-1].parentId!=null;){
                        if(i++==10){
                          break;
                        }
                        this.findParent(arrs,parentArrs[parentArrs.length-1].parentId,parentArrs);
                     }
                  for(var i=0;i<parentArrs.length;i++){
                       this.$refs['menuTable'+row.appId].toggleRowSelection(parentArrs[i],flag);
                  }
                 
                }
            }
        },
        //查询父节点
        findParent(menus,parentId,arrs){
            if(menus && menus.length>0){
              for(var i=0;i<menus.length;i++){
                if(menus[i].id==parentId){
                  arrs.push(menus[i]);
                  break;
                }
                this.findParent(menus[i].children,parentId,arrs);
              }
            }
        }
    },
    
  mounted() {
    this.loadTree();
    if (this.$route.query.name) {
       this.appName=this.$route.query.name
    }
  },
  }
</script>
